<template>
  <div class="page-container">
    <button class="back-button" @click="goToHome">
      <span class="icon-arrow-left"></span>
      返回首页
    </button>
    
    <div class="page-header">
      <h1>员工管理</h1>
      <p>管理公司所有员工信息，包括新增、编辑和删除员工</p>
    </div>
    
    <div class="action-bar">
      <div class="search-filter">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchKeyword" 
            placeholder="搜索员工姓名或工号..."
            class="search-input"
          >
          <button class="search-btn" @click="searchStaff">搜索</button>
        </div>
        
        <div class="filter-box">
          <select v-model="deptFilter" class="filter-select" @change="filterStaff">
            <option value="">所有部门</option>
            <option value="技术部">技术部</option>
            <option value="市场部">市场部</option>
            <option value="人事部">人事部</option>
            <option value="财务部">财务部</option>
          </select>
          
          <select v-model="statusFilter" class="filter-select" @change="filterStaff">
            <option value="">所有状态</option>
            <option value="在职">在职</option>
            <option value="离职">离职</option>
            <option value="休假">休假</option>
          </select>
        </div>
      </div>
      
      <button class="add-btn" @click="showAddDialog = true">
        <span class="icon-plus"></span> 新增员工
      </button>
    </div>
    
    <div class="table-container">
      <table class="staff-table">
        <thead>
          <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>部门</th>
            <th>岗位</th>
            <th>入职日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="staff in filteredStaff" :key="staff.id">
            <td>{{ staff.employeeId }}</td>
            <td>
              <div class="staff-name">
                <img :src="staff.avatar" alt="头像" class="staff-avatar">
                <span>{{ staff.name }}</span>
              </div>
            </td>
            <td>{{ staff.gender }}</td>
            <td>{{ staff.department }}</td>
            <td>{{ staff.position }}</td>
            <td>{{ staff.hireDate }}</td>
            <td>
              <span :class="['status-tag', staff.status === '在职' ? 'status-active' : staff.status === '离职' ? 'status-inactive' : 'status-leave']">
                {{ staff.status }}
              </span>
            </td>
            <td class="action-buttons">
              <button class="view-btn" @click="viewStaff(staff)">查看</button>
              <button class="edit-btn" @click="editStaff(staff)">编辑</button>
              <button class="delete-btn" @click="deleteStaff(staff.id)">删除</button>
            </td>
          </tr>
          <tr v-if="filteredStaff.length === 0">
            <td colspan="8" class="no-data">暂无员工数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 分页 -->
    <div class="pagination" v-if="filteredStaff.length > 0">
      <button 
        class="page-btn" 
        @click="currentPage = Math.max(1, currentPage - 1)"
        :disabled="currentPage === 1"
      >
        上一页
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button 
        class="page-btn" 
        @click="currentPage = Math.min(totalPages, currentPage + 1)"
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>
    </div>
    
    <!-- 新增/编辑员工弹窗 -->
    <div class="dialog-overlay" v-if="showAddDialog || showEditDialog">
      <div class="dialog-box">
        <div class="dialog-header">
          <h3>{{ showAddDialog ? '新增员工' : '编辑员工' }}</h3>
          <button class="close-btn" @click="closeDialog">&times;</button>
        </div>
        <div class="dialog-body">
          <form class="staff-form">
            <div class="form-row">
              <div class="form-group">
                <label>工号 *</label>
                <input 
                  type="text" 
                  v-model="currentStaff.employeeId" 
                  required
                  class="form-input"
                  :readonly="!showAddDialog"
                >
              </div>
              <div class="form-group">
                <label>姓名 *</label>
                <input 
                  type="text" 
                  v-model="currentStaff.name" 
                  required
                  class="form-input"
                >
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>性别</label>
                <select v-model="currentStaff.gender" class="form-select">
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="form-group">
                <label>部门 *</label>
                <select v-model="currentStaff.department" required class="form-select">
                  <option value="">请选择部门</option>
                  <option value="技术部">技术部</option>
                  <option value="市场部">市场部</option>
                  <option value="人事部">人事部</option>
                  <option value="财务部">财务部</option>
                </select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>岗位 *</label>
                <select v-model="currentStaff.position" required class="form-select">
                  <option value="">请选择岗位</option>
                  <option value="前端开发工程师">前端开发工程师</option>
                  <option value="后端开发工程师">后端开发工程师</option>
                  <option value="人力资源专员">人力资源专员</option>
                  <option value="财务专员">财务专员</option>
                  <option value="市场专员">市场专员</option>
                </select>
              </div>
              <div class="form-group">
                <label>入职日期 *</label>
                <input 
                  type="date" 
                  v-model="currentStaff.hireDate" 
                  required
                  class="form-input"
                >
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>状态 *</label>
                <select v-model="currentStaff.status" required class="form-select">
                  <option value="在职">在职</option>
                  <option value="离职">离职</option>
                  <option value="休假">休假</option>
                </select>
              </div>
              <div class="form-group">
                <label>联系电话</label>
                <input 
                  type="tel" 
                  v-model="currentStaff.phone" 
                  class="form-input"
                >
              </div>
            </div>
            
            <div class="form-group">
              <label>邮箱</label>
              <input 
                type="email" 
                v-model="currentStaff.email" 
                class="form-input"
              >
            </div>
            
            <div class="form-group">
              <label>备注</label>
              <textarea 
                v-model="currentStaff.notes" 
                rows="3"
                class="form-textarea"
              ></textarea>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="closeDialog">取消</button>
          <button class="confirm-btn" @click="saveStaff">保存</button>
        </div>
      </div>
    </div>
    
    <!-- 员工详情弹窗 -->
    <div class="dialog-overlay" v-if="showDetailDialog">
      <div class="dialog-box detail-dialog">
        <div class="dialog-header">
          <h3>{{ currentStaff.name }} 的详细信息</h3>
          <button class="close-btn" @click="showDetailDialog = false">&times;</button>
        </div>
        <div class="dialog-body">
          <div class="staff-detail">
            <div class="detail-avatar">
              <img :src="currentStaff.avatar" alt="头像" class="avatar-large">
            </div>
            
            <div class="detail-info">
              <div class="info-row">
                <div class="info-item">
                  <span class="info-label">工号：</span>
                  <span class="info-value">{{ currentStaff.employeeId }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">姓名：</span>
                  <span class="info-value">{{ currentStaff.name }}</span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item">
                  <span class="info-label">性别：</span>
                  <span class="info-value">{{ currentStaff.gender }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">部门：</span>
                  <span class="info-value">{{ currentStaff.department }}</span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item">
                  <span class="info-label">岗位：</span>
                  <span class="info-value">{{ currentStaff.position }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">入职日期：</span>
                  <span class="info-value">{{ currentStaff.hireDate }}</span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item">
                  <span class="info-label">状态：</span>
                  <span class="info-value">
                    <span :class="['status-tag', currentStaff.status === '在职' ? 'status-active' : currentStaff.status === '离职' ? 'status-inactive' : 'status-leave']">
                      {{ currentStaff.status }}
                    </span>
                  </span>
                </div>
                <div class="info-item">
                  <span class="info-label">联系电话：</span>
                  <span class="info-value">{{ currentStaff.phone || '未填写' }}</span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item full-width">
                  <span class="info-label">邮箱：</span>
                  <span class="info-value">{{ currentStaff.email || '未填写' }}</span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-item full-width">
                  <span class="info-label">备注：</span>
                  <span class="info-value">{{ currentStaff.notes || '无' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="confirm-btn" @click="showDetailDialog = false">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StaffManage',
  data() {
    return {
      staffList: [
        {
          id: 1,
          employeeId: 'EMP001',
          name: '张三',
          gender: '男',
          department: '技术部',
          position: '前端开发工程师',
          hireDate: '2022-03-15',
          status: '在职',
          phone: '13800138000',
          email: 'zhangsan@example.com',
          notes: '负责公司官网开发',
          avatar: 'https://picsum.photos/id/1012/100/100'
        },
        {
          id: 2,
          employeeId: 'EMP002',
          name: '李四',
          gender: '男',
          department: '技术部',
          position: '后端开发工程师',
          hireDate: '2022-04-20',
          status: '在职',
          phone: '13900139000',
          email: 'lisi@example.com',
          notes: '负责API接口开发',
          avatar: 'https://picsum.photos/id/1005/100/100'
        },
        {
          id: 3,
          employeeId: 'EMP003',
          name: '王五',
          gender: '女',
          department: '人事部',
          position: '人力资源专员',
          hireDate: '2022-01-10',
          status: '在职',
          phone: '13700137000',
          email: 'wangwu@example.com',
          notes: '负责招聘与员工管理',
          avatar: 'https://picsum.photos/id/1027/100/100'
        },
        {
          id: 4,
          employeeId: 'EMP004',
          name: '赵六',
          gender: '男',
          department: '市场部',
          position: '市场专员',
          hireDate: '2022-05-05',
          status: '休假',
          phone: '13600136000',
          email: 'zhaoliu@example.com',
          notes: '',
          avatar: 'https://picsum.photos/id/1074/100/100'
        },
        {
          id: 5,
          employeeId: 'EMP005',
          name: '钱七',
          gender: '女',
          department: '财务部',
          position: '财务专员',
          hireDate: '2021-11-30',
          status: '离职',
          phone: '13500135000',
          email: 'qianqi@example.com',
          notes: '2023-06-15离职',
          avatar: 'https://picsum.photos/id/1062/100/100'
        }
      ],
      searchKeyword: '',
      deptFilter: '',
      statusFilter: '',
      currentPage: 1,
      pageSize: 10,
      
      showAddDialog: false,
      showEditDialog: false,
      showDetailDialog: false,
      
      currentStaff: {
        id: null,
        employeeId: '',
        name: '',
        gender: '男',
        department: '',
        position: '',
        hireDate: '',
        status: '在职',
        phone: '',
        email: '',
        notes: '',
        avatar: 'https://picsum.photos/id/1000/100/100'
      }
    };
  },
  computed: {
    filteredStaff() {
      let result = [...this.staffList];
      
      // 搜索过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        result = result.filter(staff => 
          staff.name.toLowerCase().includes(keyword) || 
          staff.employeeId.toLowerCase().includes(keyword)
        );
      }
      
      // 部门过滤
      if (this.deptFilter) {
        result = result.filter(staff => staff.department === this.deptFilter);
      }
      
      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(staff => staff.status === this.statusFilter);
      }
      
      return result;
    },
    totalPages() {
      return Math.ceil(this.filteredStaff.length / this.pageSize);
    },
    paginatedStaff() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      return this.filteredStaff.slice(startIndex, startIndex + this.pageSize);
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    searchStaff() {
      this.currentPage = 1; // 重置到第一页
    },
    filterStaff() {
      this.currentPage = 1; // 重置到第一页
    },
    viewStaff(staff) {
      this.currentStaff = { ...staff };
      this.showDetailDialog = true;
    },
    editStaff(staff) {
      this.currentStaff = { ...staff };
      this.showEditDialog = true;
    },
    deleteStaff(id) {
      if (confirm('确定要删除这名员工吗？')) {
        this.staffList = this.staffList.filter(staff => staff.id !== id);
      }
    },
    closeDialog() {
      this.showAddDialog = false;
      this.showEditDialog = false;
      this.resetForm();
    },
    resetForm() {
      this.currentStaff = {
        id: null,
        employeeId: '',
        name: '',
        gender: '男',
        department: '',
        position: '',
        hireDate: '',
        status: '在职',
        phone: '',
        email: '',
        notes: '',
        avatar: 'https://picsum.photos/id/1000/100/100'
      };
    },
    generateEmployeeId() {
      // 生成唯一工号：EMP + 3位数字
      const maxId = Math.max(...this.staffList.map(s => parseInt(s.employeeId.replace('EMP', ''))), 0);
      const newId = maxId + 1;
      return `EMP${String(newId).padStart(3, '0')}`;
    },
    saveStaff() {
      if (!this.currentStaff.employeeId || !this.currentStaff.name || 
          !this.currentStaff.department || !this.currentStaff.position || 
          !this.currentStaff.hireDate) {
        alert('请填写所有必填字段');
        return;
      }
      
      if (this.showAddDialog) {
        // 新增员工
        const newStaff = {
          ...this.currentStaff,
          id: Math.max(...this.staffList.map(s => s.id), 0) + 1,
          employeeId: this.generateEmployeeId()
        };
        this.staffList.push(newStaff);
      } else {
        // 编辑员工
        const index = this.staffList.findIndex(s => s.id === this.currentStaff.id);
        if (index !== -1) {
          this.staffList[index] = { ...this.currentStaff };
        }
      }
      
      this.closeDialog();
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.page-header {
  margin: 20px 0 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.page-header h1 {
  margin-bottom: 10px;
  color: #333;
}

.page-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-filter {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  gap: 10px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
  font-size: 14px;
}

.search-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.search-btn:hover {
  background-color: #e0e0e0;
}

.filter-box {
  display: flex;
  gap: 10px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.add-btn {
  padding: 8px 16px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.add-btn:hover {
  background-color: #27ae60;
}

.table-container {
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.staff-table {
  width: 100%;
  border-collapse: collapse;
}

.staff-table th,
.staff-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.staff-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #444;
}

.staff-table tr:hover {
  background-color: #f9f9f9;
}

.staff-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.staff-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.status-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-active {
  background-color: #e8f4fd;
  color: #3498db;
}

.status-inactive {
  background-color: #fef2f2;
  color: #e74c3c;
}

.status-leave {
  background-color: #fff8e6;
  color: #f39c12;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn, .edit-btn, .delete-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.view-btn {
  background-color: #f0f0f0;
  color: #333;
}

.view-btn:hover {
  background-color: #e0e0e0;
}

.edit-btn {
  background-color: #3498db;
  color: white;
}

.edit-btn:hover {
  background-color: #2980b9;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
  color: #666;
}

.page-btn {
  padding: 6px 12px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.page-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-box {
  background-color: white;
  border-radius: 6px;
  width: 700px;
  max-width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.detail-dialog {
  width: 600px;
}

.dialog-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  min-width: 200px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #555;
  font-weight: 500;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-textarea {
  resize: vertical;
}

.dialog-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn, .confirm-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #333;
  border: none;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.confirm-btn {
  background-color: #3498db;
  color: white;
  border: none;
}

.confirm-btn:hover {
  background-color: #2980b9;
}

/* 员工详情样式 */
.staff-detail {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.detail-avatar {
  flex-shrink: 0;
}

.avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.detail-info {
  flex: 1;
  min-width: 300px;
}

.info-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.info-item {
  flex: 1;
  min-width: 150px;
}

.info-item.full-width {
  flex: 0 0 100%;
}

.info-label {
  display: inline-block;
  width: 80px;
  color: #666;
  font-weight: 500;
}

.info-value {
  color: #333;
}

/* 图标样式 */
.icon-arrow-left::before {
  content: '←';
}

.icon-plus::before {
  content: '+';
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-input {
    width: 100%;
  }
  
  .staff-table th:nth-child(7),
  .staff-table td:nth-child(7) {
    display: none;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>